import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Icon, Drawer, Flex, tools, ActivityIndicator } from "weaver-mobile";
import { TabPage, ListViewPage } from "weaver-mobile-page";
import SearchConponent from "../common/SearchConponent";
import * as allFun from "../../../workflowForm/util/forwardPage";

const { getLabel } = tools;

@inject("docLibraryStore")
@observer
class DocLibrary extends Component {

  static defaultProps = {
    prefixCls: "odoc-library",
  }

  componentDidMount() {
    const { history: { location: { query } }, docLibraryStore } = this.props;
    docLibraryStore.getTabs();
    //从公文中心点击按钮跳转过来的
    if (query && query.selectKey) {
      docLibraryStore.getTabKey(query.selectKey)
      if (docLibraryStore.selected == "more") {
        docLibraryStore.getList()
      } else {
        docLibraryStore.getList({ odocType: docLibraryStore.selected });
      }
      return;
    }

    //从公文中心高级搜索过来的
    if (query && query.formParams) {
      docLibraryStore.getList(query.formParams);
      return;
    }

    //直接打开本页面
    docLibraryStore.getList()

  }

  componentWillUnmount() {
    const { docLibraryStore } = this.props;
    docLibraryStore.initData();
  }

  render() {
    const { prefixCls, docLibraryStore, location: { pathname, query }, history } = this.props;
    const { drawerOpen, showDrawer, list, tabs, onOpenChange, tabClick, number, loading } = docLibraryStore;
    let conditionParams = {
      odocBrowType: "",
      ids: ""
    }
    if (query && query.selectKey) {
      conditionParams.odocBrowType = 1
      conditionParams.ids = query.selectKey;
    }
    if (query && query.formParams) {
      conditionParams.odocBrowType = 0
      conditionParams.ids = query.formParams.odocTopicType;
    }
    return (
      <div className={`${prefixCls}`}>
        <Drawer
          className="my-drawer"
          style={{ minHeight: document.documentElement.clientHeight }}
          enableDragHandle={false}
          contentStyle={{ color: '#A6A6A6', textAlign: 'center', width: "100%" }}
          sidebar={<Flex wrap={"wrap"} className={`${prefixCls}-flex`}>{this.getTabItem()}</Flex>}
          open={drawerOpen}
          position={"top"}
          onOpenChange={onOpenChange}
        >

          <TabPage
            className={`${prefixCls}-tab-page`}
            tabProps={{
              onTabClick: (tab) => tabClick(tab),
              initialPage: number,
              animated: false
            }}
            span={[6, 1]}
            tabs={tabs}
            btns={[<Icon type="more-3" onClick={() => showDrawer()} />]}
            destroyInactiveTab={true}
            key={Math.random()}
          />

          <SearchConponent
            getCondition={{
              url: "/api/odoc/odocDoclib/getCondition",
              params: conditionParams
            }}// 高级搜索form表单接口参数  默认是 没有url，post，没有参数
            pathname={pathname} //原路由地址
            history={history}
            extraButton={["advanced"]} //搜索类型
            baseSearchKey={"odocSubject"} // 基本搜索的key 数据同步用
            getSearchData={formParams => this.getSearchData(formParams)}
            title={getLabel('503576', '请输入公文标题')}
            showHotSearch={true}
          />

          <ListViewPage.Normal
            store={list}
            customHeight="100%"
            showCheck={false}
            getTemplate={this.getTemplate}
            onRowClick={(rowData) => this.forwardPage(rowData)}
          />
        </Drawer>
      </div>
    )
  }

  getTabItem() {
    const { prefixCls, docLibraryStore } = this.props;
    const { itemSelected, selectedItem, tabs } = docLibraryStore;
    const flexItem = tabs.map((item) => {
      if (item.id === "more") {
        return;
      }
      let className = `${prefixCls}-flex-item`;
      if (selectedItem.indexOf(`${item.id}`) > -1) {
        className = `${prefixCls}-flex-seleted`
      }
      return (
        <Flex.Item
          key={item.id}
          className={className}
          onClick={(e) => itemSelected(e)}
          data-id={item.id}
        >
          <span className={`showname`}>{item.showname}</span>
          <span className={`count`}>{item.count}</span>
        </Flex.Item>)
    })
    return flexItem;
  }

  getSearchData(formParams) {
    const { docLibraryStore, history } = this.props;
    docLibraryStore.getList(formParams, true);
  }

  getTemplate(template) {

    const newTemplate = {
      default: [
        {
          key: 'col1',
          style: { flex: 'none' },
          render(item) {
            if (item.picture_idspan == "icon-document-word") {
              return <Icon type="word" style={{ color: '#716BFF', marginRight: '10px' }} />;
            } else {
              return <Icon type="pdf" style={{ color: '#df4430', marginRight: '10px' }} />;
            }
          },
        },
        {
          key: 'col2',
          configs: [
            {
              key: 'row1',
              render(item) {
                if (item.unread_idspan == "true") {
                  return <div className="wm-list-page-item-row-span-text-highlight">{item.idspan}<span className="redDot"></span></div>;
                } else {
                  return <div className="wm-list-page-item-row-span-text-highlight">{item.idspan}</div>;
                }
              },
            },
            { key: 'row2', configs: [{ key: 'written_date' }] },
          ],
        },
      ],
    };
    return newTemplate;

  }

  forwardPage(rowData) {
    window.openLink.openDocument(rowData.id);
  }

}

export default DocLibrary;